<template>
  <v-list class="ChatsList-container" two-line>
    <div
      class="pointer"
      @click="$emit('click', chat)"
      v-for="chat in syncedChats"
      :key="chat.id"
    >
      <v-list-item class="align-center">
        <v-list-item-avatar min-width="32" width="32" height="32">
          <v-img class="avatar" :src="chat.avatar"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title class="text-left">
            <v-row class="justify-space-between" no-gutters>
              <v-col :cols="9" class="name mr-2 ellipsis">
                <span v-text="chat.name"></span>
              </v-col>
              <v-col class="time flex-grow-0">
                <span>
                  {{ chat.time }}
                </span>
              </v-col>
            </v-row>
          </v-list-item-title>
          <v-list-item-subtitle class="text-left">
            <v-row class="justify-space-between" no-gutters>
              <v-col :cols="9" class="subtitle mr-2 ellipsis">
                <span v-text="chat.subtitle"></span>
              </v-col>
              <v-col class="unread-info flex-grow-0" v-if="chat.unreadNumber">
                <span>
                  {{ chat.unreadNumber }}
                </span>
              </v-col>
            </v-row>
          </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </div>
  </v-list>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
interface IChatItem {
  id: string;
  avatar: string;
  name: string;
  subtitle: string;
  time: string;
  unreadNumber?: number;
}

@Component({
  components: {},
})
export default class ChatsList extends Vue {
  @PropSync("item", { type: Array, default: () => [] })
  syncedChats!: Array<IChatItem>;
}
</script>

<style lang="scss" scoped>
@import "./ChatsList.scss";
</style>
